<template>
	<view>
		<view v-if='store != "" && store.status == 1'>
			<view>
				<view style=''>
					<view style=' display: flex; justify-content: center;'>
						<u--image shape='circle' :showLoading="true" src="https://picture.jmgc.vip/1c64d3d3-22d9-477d-808a-4b816bf94fc5.png" width="80px" height="80px"
							style="position: fixed; top: 0px;object-fit: cover; margin: auto;margin-top:20px"></u--image>
					</view>
				</view>
				<img :src='backgroundImage' width='100%' />
				<view class='div1'>
					<view style='color:#909199;font-size:12px;text-align:center;padding-top:5px'>{{store.name}}</view>
				</view>
			</view>
			<view style='padding:20px;background-color: #fff;border-radius: 10px 10px 0px 0px;'>
				<view style='color:#fcbd71;padding:10px 0px;'>消费金额</view>
				<view>
					<u-row>
						<u-col span='1'>
							<view>
								<text style='font-size:28px'>￥</text>
							</view>
						</u-col>
						<u-col span='11'>
							<view>
								<view v-if='amount != ""' style='font-size:25px;color:#303133'>
									{{amount}}
								</view>
								<view v-else style='text-align: right;color:#909399;font-size:23px'>
									请输入消费金额
								</view>
							</view>

						</u-col>
					</u-row>
				</view>
			</view>
			<view style='position: fixed;bottom:0px;width:100%;'>
				<!-- <view style='color:#909399;font-size:12px;text-align: center;padding:5px'>由江门市中盛陈皮提供服务</view> -->
				<line clole='#606266'></line>
				<view style='background-color: #f3f3f3;'>
					<view style='padding:5px'>
						<u-row>
							<u-col span='9'>
								<u-row>
									<u-col span='4'>
										<view class='btn' @click='add(1)'>1</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(2)'>2</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(3)'>3</view>
									</u-col>
								</u-row>
							</u-col>
							<u-col span='3'>
								<u-row>
									<u-col span='12'>
										<view class='btn' @click='pev'
											style='display: flex;justify-content: center;align-items: center;'>
											<u-icon name="arrow-leftward" style='padding:5px;'></u-icon>
										</view>
									</u-col>
								</u-row>
							</u-col>
						</u-row>
						<u-row>
							<u-col span='9'>
								<u-row>
									<u-col span='4'>
										<view class='btn' @click='add(4)'>4</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(5)'>5</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(6)'>6</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span='4'>
										<view class='btn' @click='add(7)'>7</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(8)'>8</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(9)'>9</view>
									</u-col>
								</u-row>
								<u-row>
									<u-col span='8'>
										<view class='btn' @click='add(0)'>0</view>
									</u-col>
									<u-col span='4'>
										<view class='btn' @click='add(".")'>.</view>
									</u-col>
								</u-row>
							</u-col>
							<u-col span='3'>
								<view v-if='orderType == "WECHAT"' class='wechat-pay-btn' @click='recharge'>
									<u-icon name="weixin-circle-fill" label='支付' labelSize='18px' labelColor="#fff"
										labelPos='bottom' color='#fff' size='48'></u-icon>
								</view>
								<view v-if='orderType == "ALIPAY"' class='ali-pay-btn' @click='recharge'>
									<u-icon name="zhifubao-circle-fill" label='支付' labelSize='18px' labelColor="#fff"
										labelPos='bottom' color='#fff' size='48'></u-icon>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		<view v-else style='padding-top:30vh'>
			<u-empty mode="permission" text='二维码失效,请重新扫码'>
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store: '',
				amount: '',
				orderType: 'WECHAT',
				backgroundImage: 'https://picture.jmgc.vip/77008014-b99a-4aa4-b67a-580dc8f937b3.png',
			}
		},
		async onLoad(options) {
			if (typeof(options.store) != 'undefined') {
				this.request.get(`public/stores/${options.store}`).then((res) => {
					console.log(res.data)
					this.store = res.data
				})
			} else {
				uni.showModal({
					title: '',
					content: '获取信息失败，请重新扫码',
					showCancel: false,
					success: () => {}
				})
			}
		},
		onShow() {
			// if (/MicroMessenger/i.test(navigator.userAgent)) {
			//   // 微信扫码打开
			//   this.platform = '微信'
			// } else 
			if (/AlipayClient/i.test(navigator.userAgent)) {
				// 支付宝扫码打开
				this.orderType = 'ALIPAY'
			}

		},
		methods: {
			recharge() {
				if (!this.store) {
					uni.showToast({
						title: '获取门店信息失败，请退出重试!',
						icon: 'none'
					})
					return
				}
				let amount = this.amount + ''
				if (amount.indexOf('.')) {
					let amountArr = this.amount.split('.')
					if (amountArr[1] == '') {
						amount = amountArr[0]
					}
				}
				amount = parseFloat(amount)
				if (amount <= 0) {
					uni.showToast({
						title: '金额必须大于0！',
						icon: 'none'
					})
					amount = ''
					return
				}
				if (this.store.status != 1) {
					uni.showModal({
						title: '提示',
						content: '支付功能未开通！',
						showCancel: false,
						success: () => {

						}
					})
					return
				}
				uni.showLoading()
				this.request.post(`public/deposits`, {
					user: this.store.user.id,
					relatedStore: this.store.id,
					amount: amount
				}).then((res) => {
					uni.navigateTo({
						url: `/pages/payment/redirect?invoice=${res.data.invoice.id}`
					})
				})
			},
			add(num) {
				let amount = 0
				// 判断是否.
				this.amount = this.amount + ''
				if (num == '.') {
					console.log('点击了。')
					if (this.amount == '') {
						this.amount = '0.'
					} else {

						if (this.amount.indexOf('.') == -1) {
							this.amount += '.'
						}
					}
				} else {
					if (this.amount.indexOf('.') == -1) {
						this.amount += `${num}`
					} else {
						let amountArr = this.amount.split('.')
						console.log(amountArr)
						if (amountArr[1] == '') {
							this.amount += `${num}`
						} else {
							if (amountArr[1].length < 2) {
								this.amount += `${num}`
							}
						}
					}
				}
			},
			pev() {
				let amount = this.amount + ''
				amount = amount.slice(0, -1)
				// amount = Math.floor(amount / 10)
				// console.log(amount)
				this.amount = amount
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #e9eae9;
		text-align: center;
		padding: 5px 0px;
	}

	.group {
		margin: 10px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
	}

	.title {
		color: #909399;
		font-size: 14px;
		line-height: 32px;
	}

	.name {
		font-size: 14px;
		float: right;
		padding-right: 10px;
		line-height: 32px;
		color: #303133;
	}

	.div1 {
		// background-color: #040313;
		// margin: 10px;
		text-align: center;
		// padding: 10px;
		// border-radius: 10px;
	}

	.label {
		color: white;
		font-size: 14px;
		text-align: center;
	}

	.amount {
		color: #f56c6c;
		text-align: center;
	}

	.amount-detail {
		font-size: 35px;
		font-weight: bold;
	}

	.btn {
		padding: 10px 0px;
		margin: 5px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;
		color: #303133;
		font-size: 20px;
		font-weight: bold;
		border: solid #f3f3f3 1px;
	}

	.btn2 {
		margin: 5px 5px 0px 5px;
		padding: 5px 0px;
		border-radius: 5px;
		text-align: center;
		background-color: #fff;
		color: #303133;
		font-size: 18px;
		font-weight: bold;
		border: solid #f3f3f3 1px;
	}

	.pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff;
		font-size: 20px;
		border: solid #f3f3f3 1px;
	}


	.group {
		margin: 10px;
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
	}

	.group-active {
		margin: 10px;
		background-color: #f3f3f3;
		border-radius: 10px;
		border: solid #19be6b 2px;
	}

	.wechat-pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #19be6b;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ali-pay-btn {
		padding: 10px 0px;
		margin: 5px;
		text-align: center;
		border-radius: 5px;
		background-color: #2979ff;
		color: #fff;
		font-size: 20px;
		height: 20vh;
		line-height: 20vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>